安装

Vue Router 是 Vue 官方的客户端路由解决方案。

pnpm add vue-router

创建路由器实例

import { createMemoryHistory, createRouter } from "vue-router";

import HomeView from "./HomeView.vue";
import AboutView from "./AboutView.vue";

const routes = [
  { path: "/", component: HomeView },
  { path: "/about", component: AboutView },
];

const router = createRouter({
  history: createMemoryHistory(),
  routes,
});

注册路由器插件

createApp(App).use(router).mount("#app");

使用

如果使用 DOM 内模板，那么需要注意：组件名字必须使用 kebab-case 风格且不支持自闭合标签。

因此你不能直接写 <RouterView />，而需要使用 <router-view></router-view>。

参考链接

官网